/*
 * @Author: cygao
 * @Date: 2018-11-10 21:08:25
 * @Last Modified by: cygao
 * @Last Modified time: 2018-11-25 22:47:40
 */

import React, { Component } from 'react';
import './register.less';

export default class Register2 extends Component {
    constructor() {
        super()
        this.state = {
          count: 60, // 秒数初始化为60秒
          btnText: '获取验证码',
          isDisable: false // 文案默认为‘获取验证码‘
        }
    }
    back = () =>{
      this.props.history.go(-1);
    }
    //获取短信验证码
    getCode() {
        // isDisable is true 的时候，不允许再点击
      console.log('获取验证码')
      let count = this.state.count
      const timer = setInterval(() => {
        this.setState({
          count: (count--),
          btnText: '重新发送('+ count +'s)',
          isDisable: true
        }, () => {
          if(count ===0) {
            clearInterval(timer);
            this.setState({
              count: 60,
              btnText: '重新发送',
              isDisable: false
            })
          }
        })
      }, 1000)
    }
    nextStep() {
        this.props.history.push('/register3');
        console.log('next')
    }
    render() {
        return (
            <div id="register-container">
                <img onClick={this.back} className="logo-back" src={require('../../../static/images2/logo-back.png')} alt="" />
                <div className="reg-content">
                    <div className="reg-title">输入短信验证码</div>
                    <input className="reg-input" type="text" placeholder="请输入短信验证码"/>
                    <input
                      className= "code-btn"
                      type="button"
                      value={this.state.btnText}
                      disabled={this.state.isDisable}
                      onClick={this.getCode.bind(this)}
                    />
                    <button className="reg-btn reg-btn2" onClick={this.nextStep.bind(this)}>下一步</button>
                </div>
            </div>
        )
    }
}
